<template>
  <div class="app">
    <div class="warp">
      <div>
        <ul>
          <li>中国大陆版-河北</li>
          <li>你好,请登录</li>
          <li>切换至企业版</li>
        </ul>
      </div>
      <div>
        <ul>
          <li>购物车</li>
          <li>我的订单</li>
          <li>我的京东</li>
          <li>企业才购</li>
          <li>商家服务</li>
          <li>网页导航</li>
          <li>手机京东</li>
          <li>网站无障碍</li>
        </ul>
      </div>
    </div>
    <div class="head">
      <div><img src="./assets/logo.png" alt="logo"></div>
      <div class="ssk">
        <div class="search">
          <input type="text" placeholder="请输入商品名称">
          <button>搜索</button>
        </div>
        <div class="推荐">
          <ul>
            <li v-for="(item, index) in sousuo" :key="index">{{item}}</li>
          </ul>
        </div>
      </div>
      <div>
        <img src="./assets/choujiang.png" alt="抽奖">
      </div>
    </div>
    <div class="bufen">
      <div class="bufen1">
        <div :class="['fenlei','beijing']">
          <ul v-for="(items, index) in leibie" :key="index"  class="category-container">
            <li class="fenlei1" v-for="(item, index) in items" :key="index">{{item}}</li>
            <div class="zhankai">
              <ul v-for="(category, index) in liebiao" :key="index">
                {{ category.name }}
                <li v-for="(product, pIndex) in category.content"  :key="pIndex">
                  {{ product }} <!-- 单独显示每个商品 -->
                </li>
              </ul>
            </div>
          </ul>
        </div>
        <div class="mid">
          <div  :class="['mid_mid','beijing']">
            <ul style ="width:100%;display: flex ;justify-content: space-between;">
              <li style="font-size: 20px" v-for="(item, index) in biaoti" :key="index">{{item}}</li>
            </ul>
          </div>
          <div class="mid_xiabu">
            <div class="lunbotu">
              <img width="250" src="./assets/lunbotu.png" alt="">
            </div>
            <div class="wangge">
              <ul>
                <li v-for="(item, index) in zhanshi" :key="index">
                  <div class="desc">
                    {{ item.desc }}
                  </div>
                  <div class="img">
                    <img :src=item.img1 alt="">
                    <img :src=item.img2 alt="">
                  </div>
                  <div class="price">
                    <span>{{ item.price }}</span>
                    <span>{{ item.price1 }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div :class="['zhuye','beijing']">
          <div class="touxiang">
            <div><img src="./assets/touxiang.png" alt=""></div>
            <div>
              <p style="font-size: 20px ">你好</p>
              <p style="font-size: 12px ">注册</p>
            </div>
          </div>
          <div>
            <p style="font-size: 20px" >登录京东后更多优惠</p>
            <p style="font-size: 20px">登录可享，专属优惠，贴心推荐</p>
          </div>
          <div>
            <button style="width: 100% ;font-size: 30px">立即登录</button>
          </div>
          <div>
            <ul>
              <li>浏览记录</li>
              <li>商品收藏</li>
              <li>店铺关注</li>
            </ul>
          </div>
          <div>
            <img src="./assets/lvip.png" alt="" width="50%">
            <img src="./assets/rvip.png" alt="" width="50%">
          </div>
        </div>
      </div>
      <div class="bufen2">
        <ul v-for="(item,index) in tuijian" :key="index">
          <li>
            <img :src=item.img alt="">
            <div>
              {{ item.tital1}}<br>
              {{ item.tital2}}
            </div>
          </li>
          <li>
            <p>|</p>
          </li>
        </ul>
      </div>
      <div class="bufen3">
        <div v-for="(item,index) in goodsList " :key="index">
          <goods :item="item" @click="togood(item)"></goods>
        </div>
        <!--        <goods v-for="(item,index) in goodsList " :key="index" :item="item"></goods>-->
      </div>
      <end></end>
    </div>
    <router-view></router-view>
  </div>

</template>

<script lang="ts" setup>
import { ref } from "vue";
import  goods from '@/components/goods.vue'
import endlist from '@/components/endList.vue'
import {useRouter,useRoute} from "vue-router";
import End from "@/components/end.vue";
const sousuo = ref(['爆款低至1元包邮', '外卖百亿补贴', '多功能沙发床', '冲锋衣', '电脑整机', '茅台预约1499元', '空气炸锅', '户外露营', '包包']);
const leibie=ref([
  ["家用电器"],['手机','运营商','数码'],['电脑','办公','文具用品'],['家具','家居','家装','厨具'],
  ["家用电器"],['手机','运营商','数码'],['电脑','办公','文具用品'],['家具','家居','家装','厨具'],
  ["家用电器"],['手机','运营商','数码'],['电脑','办公','文具用品'],['家具','家居','家装','厨具']])
const zhankai=ref(['爆款低至1元包邮', '外卖百亿补贴', '多功能沙发床', '冲锋衣', '电脑整机', '茅台预约1499元', '空气炸锅', '户外露营', '包包'])
const liebiao=ref([{
  name:"电视", content: ["电视", "空调", "冰箱", "洗衣机", "电风扇", "电吹风", "电暖器", "电热毯",]},
  {name:"空调", content: ["空调", "冰箱", "洗衣机", "电风扇", "电吹风", "电暖器", "电热毯",]},
  {name:"电脑", content: ["电脑", "办公", "文具用品", "家具", "家居", "家装", "厨具",]},
  {name:"家具", content: ["家具", "家居", "家装", "厨具",]},
  {name:"手机", content: ["手机", "运营商", "数码",]},
  {name:"电脑", content: ["电脑", "办公", "文具用品", "家具", "家居", "家装", "厨具",]},
  {name:"家具", content: ["家具", "家居", "家装", "厨具",]},
  {name:"手机", content: ["手机", "运营商", "数码",]},
  {name:"电脑", content: ["电脑", "办公",]}
])
const router=useRouter()

const togood=(item)=>{
  router.push({path:'/togood',query:{'product':JSON.stringify(item)}})//问号后面加参数
}


const biaoti=ref(['出口转内销','早市好价','新品','排行榜','京东拍卖','京东企业购'])
const zhanshi = ref([
  {
    desc: "国家补贴×百亿补贴",
    img1:require("./assets/zongzi.png"),
    img2:require("./assets/zongzi.png"),

    price: "￥0.01",
    price1: "￥0.01",
  },
  {
    desc: "国家补贴×百亿补贴",
    img1:require("./assets/zongzi.png"),
    img2:require("./assets/zongzi.png"),
    price: "￥0.01",
    price1: "￥0.01",
  },
  {
    desc: "国家补贴×百亿补贴",
    img1:require("./assets/zongzi.png"),
    img2:require("./assets/zongzi.png"),
    price: "￥0.01",
    price1: "￥0.01",
  },
  {
    desc: "国家补贴×百亿补贴",
    img1:require("./assets/zongzi.png"),
    img2:require("./assets/zongzi.png"),
    price: "￥0.01",
    price1: "￥0.01",
  },
]);
const tuijian=ref([
  { img:require("./assets/dianshi.png"),
    tital1:"为你精选",
    tital2:"猜你喜欢"
  },
  {
    img:require("./assets/dianshi.png"),
    tital1: "潮店好物",
    tital2: "3C数码"
  },
  {
    img:require("./assets/dianshi.png"),
    tital1: "京东超市",
    tital2: "水果"
  },
  {
    img:require("./assets/dianshi.png"),
    tital1: "京东超市",
    tital2: "水果"
  },
  {
    img:require("./assets/dianshi.png"),
    tital1: "京东超市",
    tital2: "水果"
  },
  {
    img:require("./assets/dianshi.png"),
    tital1: "京东超市",
    tital2: "水果"
  }
])
const goodsList=ref([
  {
    img: require("./assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  },{
    img: require("@/assets/tuoluo.png"),
    title:"大牌同款 带轮塑料收纳箱特大号储物箱学生书箱儿童玩具整理搬家",
    price:100,
    sale:20
  }
])
const  tedian=ref([
  {img:require("./assets/duo.png"),title:'品类齐全,轻松购物'},
  {img:require("./assets/duo.png"),title:'品类齐全,轻松购物'},
  {img:require("./assets/duo.png"),title:'品类齐全,轻松购物'},
  {img:require("./assets/duo.png"),title:'品类齐全,轻松购物'}
])
const enddata=ref([
  {tital:"购物指南",content:["购物流程","会员介绍","生活旅行","常见问题",'大家电','练习客服']},
  {tital:"购物指南",content:["购物流程","会员介绍","生活旅行","常见问题",'大家电','练习客服']},
  {tital:"购物指南",content:["购物流程","会员介绍","生活旅行","常见问题",'大家电','练习客服']},
  {tital:"购物指南",content:["购物流程","会员介绍","生活旅行","常见问题",'大家电','练习客服']},
  {tital:"购物指南",content:["购物流程","会员介绍","生活旅行","常见问题",'大家电','练习客服']}
])
</script>

<style scoped>
.app {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}

.head {
  width: 80%;
  height: 100px;
  background-color: #f7fcfe;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.warp {
  width: 80%;
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12px;
}

.search {
  width: 600px;
  height: 36px;
  border: 2px solid #ff0000;
  display: flex;
  align-items: center;
}

.search input {
  flex: 1;/*占满所有的空间*/
  height: 100%;
  border: none;
  padding: 0 10px;

}

button {
  height: 100%;
  background-color: #ff0000;
  color: white;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  font-weight: bold;
}

.推荐 {
  margin-top: 5px;
}

ul {
  display: flex;
  list-style: none;
  padding: 8px 0px;
  margin: 0;
  flex-wrap: wrap;
}

li {
  margin-right: 10px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

li:hover {
  color: #ff0000;
}

.ssk {
  display: flex;
  flex-direction: column;
  align-items: center;}

.bufen {
  flex-direction: column; /* 主轴变为垂直方向 */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bufen1{

  background-color: white;
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fenlei{
  width: 200px;
  background-color: #f7fcfe;
  padding: 10px;
  margin: 10px;
}
.mid{
  display: block;
  justify-content: space-between;
  align-items: center;
}
.beijing{
  background-color: #f7fcfe;
  border-radius: 8px
}
.zhuye{
  width: 300px;
  padding: 10px;
  align-items: center;
  margin: 10px;
}
.touxiang{
  display: flex;
  align-items: center;
}
.grid-custom {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.grid-item {
  background-color: #f7fcfe;
  padding: 10px;
  margin: 10px;
}
.category-container:hover .zhankai {
  display: block;
}

.zhankai{
  display: none;
  position: absolute;
  top: 170px;
  left: 380px;
  width: 500px;
  height: 383px;
  background-color: #f7fcfe;
  padding: 10px;
  margin: 10px;
  border: 2px solid red;
  border-radius: 8px;

}
.zhankai ul{
  display: flex;
  justify-items: center;
}
.zhankai li{
  padding-top: 3px;
  padding-left: 10px;
}

.wangge{
  margin: 10px;
  background-color: #f7fcfe;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  border-radius: 8px;

}

.wangge ul {
  display: contents; /* 确保 ul 不干扰 grid 布局 */
}

.wangge li {
  margin: 10px;
  background-color: #fff5f6;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.2s ease-in-out;
}

.wangge li:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.mid_xiabu{
  display: flex;
  justify-content: space-between;
}

.desc {
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}

.img {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img img {
  max-width: 100%;
  max-height: 100%;
}

.price {
  font-size: 16px;
  font-weight: bold;
  color: #ff0000;
  margin :0px 30px;
}

.price span {
  margin-right: 5px;
}

.mid_mid{
  width: 700px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lunbotu{
  margin: 10px;
}

.bufen2{
  width: 80%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(1, 1fr);
  background-color: #f7fcfe;
}

.bufen2 li{
  display: flex;
  justify-items: center;
  align-items: center;
  margin: 12px;
  background-color: #f7fcfe;
  border-radius: 8px;
  padding: 10px;
}
.bufen3{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 80%;
  background-color: #f7fcfe;
}
.bufen4{
  width: 60%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1,1fr);
}
.tedian{
  display: flex;
  justify-items: center;
  align-items: center;
}
.bufen5{
  width: 80%;
  background-color: #f7fcfe;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
</style>

